<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="referrer" content="never">
    <title>用户管理</title>
    <link rel="stylesheet" href="../lib/layui-v2.5.7/layui/css/layui.css">
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        ul {
            list-style: none;
        }

        .layui-layer-content {
            padding: 20px;
        }

        button[lay-submit] {
            display: block;
            margin: 10px auto;
        }
    </style>
</head>
<body>

    <div class="layui-container">
        <button class="layui-btn add">添加用户</button>
        <!-- 用户表格 -->
        <table class="user-table" lay-filter="userlist"></table>
    </div>
    
    <script src="../lib/layui-v2.5.7/layui/layui.all.js"></script>
    <script src="api.js"></script>
    <script src="httpserve.js"></script>
    <script type="text/javascript">
        var $ = layui.$,
            table = layui.table,
            form = layui.form

        table.render({
            elem: ".user-table", // 页面上的占位符
            id: "userTable", // 指定renderId，用于重绘等
            url: api.user.list,
            request: { // 更改请求起始页以及分页的字段名
                pageName: "start"
            },
            parseData(res){ // 接收到数据之后的处理，返回值为layuiTable处理的数据格式
                for(var i = 0; i < res.data.list.length; i ++ ){
                    res.data.list[i].sex = res.data.list[i].sex == 0 ? "男" : "女";
                }
                return {
                    code: 0,
                    msg: "",
                    count: res.data.totalRow,
                    data: res.data.list
                }
            },
            cols: [[ // 表格列参数
                {
                    title: "序号",
                    type: "numbers"
                },
                {
                    title: "昵称",
                    field: "name"
                },
                {
                    title: "年龄",
                    field: "age",
                    width: 100
                },
                {
                    title: "性别",
                    field: "sex",
                    width: 100
                },
                {
                    title: "地址",
                    field: "address"
                },
                {
                    title: "电话",
                    field: "tel"
                },
                {
                    title: "学校",
                    field: "school",
                    width: 200,
                },
                {
                    title: "操作",
                    width: 200,
                    toolbar: `<div>
                        <button class="layui-btn layui-btn-xs layui-btn-warm" lay-event="edit">编辑</button>
                        <button class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</button>
                    </div>`
                }
            ]],
            page: {
                limit: 7,
                limits: [7, 14, 21]
            }
        })

        // 添加用户
        $(".add").click(function (){
            // 与修改都是打开表单弹窗，略有区别，封装函数共享
            openMask();
        })
        
        // 表格事件
        table.on("tool(userlist)", function (obj){
            // obj.event => 表格中操作按钮的 lay-event 绑定的值
            // obj.data => 操作按钮当前行的数据
            if(obj.event == "edit"){
                // 修改
                // 打开弹窗 -> 修改：去掉用户名/密码；添加用户id；赋值
                openMask(obj.data);
            }else if(obj.event == "del"){
                // 删除
                layer.confirm("确定要删除吗？", { icon: 3 }, function (index){
                    // 关闭询问窗
                    layer.close(index);
                    // 发出删除请求
                    delUser(obj.data.userId, function (res){
                        if(res.code == "success"){
                            msg("删除成功", true);
                            // 刷新用户列表
                            table.reload("userTable");
                        }else {
                            msg('删除失败');
                        }
                    });
                })
            }
        })

        // 表单提交
        form.on("submit(*)", function (data){
            // data.field 表单中 name=value 组成的对象

            // 判断是添加还是修改
            if(data.field.username){
                addUser(data.field, function (res){
                    console.log(res);
                    if(res.code == "fail"){
                        // layer.msg("添加失败", {icon: 2, time: 1500 });
                        msg("添加失败");
                    }else {
                        // 关闭表单弹窗
                        layer.closeAll();
                        // 弹出成功提示
                        msg("添加成功", true);
                        // 刷新用户列表界面
                        table.reload("userTable");
                    }
                })
            }else {
                updateUser(data.field, function (res){
                    if(res.code == "success"){
                        // 关闭弹窗
                        layer.closeAll();
                        msg("修改成功", true);
                        // 刷新用户列表界面
                        table.reload("userTable");
                    }else {
                        msg("修改失败");
                    }
                })
            }
            
        })

        // 表单弹窗的函数
        function openMask(data){
            // 打开弹窗
            layer.open({
                type: 1,
                content: `
                <div class="layui-form layui-form-pane" lay-filter="user-form">
                    ${ !data ? `<div class="layui-form-item">
                        <label class="layui-form-label">用户名</label>
                        <div class="layui-input-block">
                            <!-- 表单验证，设置 lay-verify="规则" -->
                            <input type="text" class="layui-input" value="zhangfei" name="username" autocomplete="off"
                                lay-verify="">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">密码</label>
                        <div class="layui-input-block">
                            <input type="password" class="layui-input" value="123456" name="password" autocomplete="off">
                        </div>
                    </div>` : `
                    <input type="text" class="layui-input" name="userId" autocomplete="off" style="display: none">
                    ` }
                    <div class="layui-form-item">
                        <label class="layui-form-label">昵称</label>
                        <div class="layui-input-block">
                            <input type="text" class="layui-input" name="name" autocomplete="off" lay-verify="required|username" value="张大侠">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">年龄</label>
                        <div class="layui-input-block">
                            <input type="text" class="layui-input" name="age" autocomplete="off" lay-verify="required" value="23">
                        </div>
                    </div>
                    <div class="layui-form-item" pane>
                        <label class="layui-form-label">性别</label>
                        <div class="layui-input-block">
                            <input type="radio" title="男" name="sex" value="0" checked>
                            <input type="radio" title="女" name="sex" value="1">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">电话</label>
                        <div class="layui-input-block">
                            <input type="text" class="layui-input" name="tel" autocomplete="off"
                                lay-verify="required|phone" value="13567674589">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">地址</label>
                        <div class="layui-input-block">
                            <input type="text" class="layui-input" name="address" autocomplete="off" lay-verify="required" value="蜀国草庐东北角破庙1号">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">学校</label>
                        <div class="layui-input-block">
                            <input type="text" class="layui-input" name="school" autocomplete="off" lay-verify="required" value="蜀中虎将职业培养技术学院">
                        </div>
                    </div>

                    <button class="layui-btn" lay-submit lay-filter="*">提交</button>
                </div>`
            });

            form.render("radio", "user-form");

            form.val("user-form", data);
        }

        // 弹窗提示的封装函数
        function msg(text, suc){
            layer.msg(text, {icon: suc ? 1 : 2, time: 1500 });
        }


    </script>
</body>
</html>